/* eslint-disable */
import react from "react";
import echarts from "echarts/lib/echarts";
import Chart from "echarts-for-react/lib/core";

// 折线图
export default function ChartLine({ title = "", xData = [], data = [] }) {
  const option = {
    color: "rgba(0,255,240,1)",
    title: { text: title, left: "center", textStyle: { color: "#fff" } },
    grid: {
      top: 30,
      left: 10,
      right: 20,
      bottom: 10,
      containLabel: true
    },
    tooltip: { trigger: "axis" },
    xAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { color: "#fff" },
      data: xData,
      boundaryGap: false
    },
    yAxis: {
      name: "",
      splitLine: { show: false },
      axisTick: { show: false },
      axisLine: { lineStyle: { color: "#fff" } },
      axisLabel: { color: "#fff" }
    },
    series: [
      {
        type: "line",
        data,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: "rgba(0,255,240,0.8)" },
              { offset: 1, color: "rgba(0,255,240,0.2)" }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  };

  return (
    <div className="situational-detail">
      <Chart
        echarts={echarts}
        option={option}
        notMerge
        lazyUpdate
        style={{ height: 230 }}
      />
    </div>
  );
}
